<!--  族库管理 -->
<template>
	<div>
		<div class="flex">
			<div class="flex-left">
				<div class="navigationBar">
					<label>族目录</label>
				</div>
				<div class="flex-tree">
					<el-tree
						ref="tree"
						:data="data"
						node-key="Id"
						@node-click="handleNodeClick"
						:highlight-current="true"
						:props="defaultProps"
						:default-expand-all="false"
						:default-expanded-keys="defaultExpandedKeys"
					>
					</el-tree>
				</div>
			</div>
			<div class="flex-right">
				<navigation-bar>
					<div class="searchContent">
						<el-input
							v-model="FileName"
							placeholder="请输入族名称"
							size="mini"
							style="width: 150px; margin-right: 10px"
						></el-input>
						<custom-button
							type="search"
							style="margin-right: 10px"
							@searchClick="searchClick"
						></custom-button>
						<custom-button
							type="reset"
							style="margin-right: 10px"
							@resetClick="resetClick"
						></custom-button>
						<custom-button
							type="custom"
							title="标签"
							icon="el-icon-s-flag"
							@customClick="showBqSelect"
						></custom-button>
					</div>
				</navigation-bar>
				<div class="gjw-list">
					<div v-if="listData.length == 0" class="noData">暂无数据</div>
					<div v-else>
						<div class="gjw-list-list">
							<div class="gjw-list-item">
								<div
									class="item"
									v-for="(item, index) in listData"
									v-bind:key="index"
									@mouseover="itemOver(item)"
									@mouseleave="itemLevel"
								>
									<div class="item-img" @click="showDetail(item)">
										<el-image
											style="height: 120px"
											:src="item.imgSrc"
										></el-image>
									</div>
									<div class="item-button" v-show="!item.show">&nbsp;</div>
									<div class="item-button" v-show="item.show">
										<el-button
											type="primary"
											icon="el-icon-download"
											size="small"
											@click="downItem(item)"
											>下载</el-button
										>
										<el-button
											type="default"
											icon="el-icon-star-off"
											size="small"
											v-if="item.isSc == 0"
											@click="itemSc(item)"
											>收藏</el-button
										>
										<el-button
											type="default"
											icon="el-icon-star-on"
											size="small"
											v-if="item.isSc == 1"
											@click="itemSc(item)"
											>取消收藏</el-button
										>
									</div>
									<div class="item-title">
										<el-tooltip :content="item.name" placement="top">
											<label>{{ item.name }}</label>
										</el-tooltip>
									</div>
									<el-row class="item-row">
										<el-col
											:span="24"
											style="text-align: left; padding-left: 10px"
											>格式：{{ item.gs }}</el-col
										>
										<!-- <el-col
											:span="12"
											style="text-align: right; padding-right: 10px"
											>版本：{{ item.bb }}</el-col
										> -->
									</el-row>
								</div>
							</div>
						</div>
						<div class="gjw-list-page">
							<el-pagination
								background
								:layout="
									hasIsSizes
										? 'prev, pager, next,total,sizes'
										: 'prev, pager, next,total'
								"
								:total="count"
								:page-size="size"
								:current-page="current"
								@current-change="pageChange"
								:page-sizes="[20, 50, 100, 200, 500]"
								@size-change="handleSizeChange"
							>
								>
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="dialogShow">
			<custom-dialog
				:title="dialogTitle"
				size="large"
				:key="randomValue"
				@dialogClose="dialogClose"
			>
				<div class="detail-dialog">
					<div class="detail-dialog-title">
						<el-row>
							<el-col :span="15">
								<div class="detail-name" style="color: brown">
									{{ tableName }}
								</div>
								<div class="detail-name">{{ curItem.name }}</div>
								<div class="detail-update">
									上传时间：{{
										curItem.updateTime
									}}&nbsp;&nbsp;&nbsp;&nbsp;上传人：{{ curItem.username }}
								</div>
							</el-col>
							<el-col :span="9" style="text-align: right">
								<el-button
									type="primary"
									icon="el-icon-delete"
									size="small"
									style="background: red; border-color: red"
									@click="deleteItem(curItem)"
									>删除</el-button
								>
								<el-button
									type="primary"
									icon="el-icon-s-tools"
									size="small"
									@click="bindBq(curItem)"
									>标签绑定</el-button
								>
								<el-button
									type="primary"
									icon="el-icon-download"
									size="small"
									@click="downItem(curItem)"
									>下载</el-button
								>
								<el-button
									type="default"
									icon="el-icon-star-off"
									size="small"
									v-if="curItem.isSc == 0"
									@click="itemSc(curItem)"
									>收藏</el-button
								>
								<el-button
									type="default"
									icon="el-icon-star-on"
									size="small"
									v-if="curItem.isSc == 1"
									@click="itemSc(curItem)"
									>取消收藏</el-button
								>
							</el-col>
						</el-row>

						<el-row style="margin: 20px 0">
							<el-col :span="16">
								<div class="detail-wrapper">
									<el-tabs v-model="activeName" @tab-click="handleClick">
										<el-tab-pane label="缩略图" name="first">
											<div class="img-list">
												<div class="img-list-left-arrow" @click="imgLeftClick">
													<i class="el-icon el-icon-arrow-left"></i>
												</div>
												<div class="img-list-left-img">
													<el-image
														style="height: 400px; margin-top: 50px"
														:src="imgList[imgIndex]"
													></el-image>
												</div>
												<div
													class="img-list-right-arrow"
													@click="imgRightClick"
												>
													<i class="el-icon el-icon-arrow-right"></i>
												</div>
											</div>
											<div class="img-list-li">
												<ul>
													<li
														v-for="(item, index) in imgList"
														v-bind:key="index"
														:class="imgIndex == index ? 'hover' : ''"
													></li>
												</ul>
											</div>
										</el-tab-pane>
										<el-tab-pane label="3D" name="second">
											<threeD :curItem="curItem"></threeD>
										</el-tab-pane>
									</el-tabs>
								</div>
							</el-col>
							<el-col :span="8" style="float: right">
								<div class="detail-wrapper">
									<div class="detail-wrapper-type">
										<label>类型：</label>
										<el-select
											v-model="typeValue"
											placeholder="请选择类型"
											size="small"
											style="width: 290px"
											@change="typeChange"
										>
											<el-option
												v-for="(item, index) in propertys"
												v-bind:key="index"
												:label="item.FamilyTypeName"
												:value="index"
											>
											</el-option>
										</el-select>
									</div>

									<div class="collapseType">
										<!-- <el-collapse v-model="activeCollapse">
                      <el-collapse-item
                        :title="item.FamilyTypeName"
                        :name="index"
                        class="typeItem"
                        v-for="(item, index) in propertys"
                        v-bind:key="index"
                      >
                        <div
                          class="collapseType-item"
                          v-for="(child, cindex) in item.FamilyParameters"
                          v-bind:key="cindex"
                        >
                          <div class="collapseType-item-left">
                            {{ child.ParamKey }}：
                          </div>
                          <div class="collapseType-item-right">
                            {{ child.ParamVal }}
                          </div>
                        </div>
                      </el-collapse-item>
                    </el-collapse> -->
										<div
											class="collapseType-item"
											v-for="(child, cindex) in propertysValue"
											v-bind:key="cindex"
										>
											<div class="collapseType-item-left">
												{{ child.ParamKey }}：
											</div>
											<div class="collapseType-item-right">
												{{ child.ParamVal }}
											</div>
										</div>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</custom-dialog>
		</div>

		<div v-if="dialogFolderShow">
			<custom-dialog
				:title="dialogFolderTitle"
				size="large"
				@dialogClose="dialogFolderClose"
			>
				<form-index
					:formConfig="formConfigFolder"
					@submit="folderSubmit"
					:type="typeFolder"
					@formInputChange="formInputFolderChange"
					ref="form"
				>
				</form-index>
			</custom-dialog>
		</div>

		<div v-if="dialogBqShow">
			<custom-dialog title="标签绑定" size="large" @dialogClose="dialogBqClose">
				<bindBq :fileId="curItem.Id" @success="dialogBqClose"></bindBq>
			</custom-dialog>
		</div>

		<div v-if="dialogBqSelectShow">
			<custom-dialog
				title="标签选择"
				size="large"
				@dialogClose="dialogBqSelectClose"
			>
				<bindBqSearch @success="bqSelect"></bindBqSearch>
			</custom-dialog>
		</div>

		<div v-if="showloading">
			<loadingMask></loadingMask>
		</div>
	</div>
</template>

<script>
	import { presetFieldsForm } from "@/assets/form/managementCenter/expandManage/presetFieldsForm"
	import { zkForm } from "@/assets/form/managementCenter/zkForm"
	import customDialog from "@/components/customComponents/customDialog"
	import customButton from "@/components/customComponents/customForm/customButton"
	import formIndex from "@/components/customComponents/customForm/formIndex"
	import loadingMask from "@/components/customComponents/loading"
	import navigationBar from "@/components/customComponents/managementCenter/navigationBar"
	import { AjaxCommon, ImageAddress } from "@/libs/apiCommon"
	import { PopupCommon } from "@/libs/popupCommon"
	import { SessionCommon } from "@/libs/sessionCommon"
	import { Utility } from "@/libs/utility"
	import threeD from "../threeD"
	import bindBq from "./bindBq.vue"
	import bindBqSearch from "./bindBqSearch.vue"
	export default {
		components: {
			navigationBar,
			customButton,
			customDialog,
			formIndex,
			bindBq,
			bindBqSearch,
			loadingMask,
			threeD,
		},
		data() {
			return {
				defaultExpandedKeys: ["0"],
				defaultProps: {
					children: "children",
					label: "label",
				},
				randomValue: "111",
				showloading: true,
				inter: null,
				FileName: "",
				dialogBqSelectShow: false,
				dialogBqShow: false,
				typeValue: 0,
				activeCollapse: ["1"],
				activeName: "first",
				imgIndex: 0,
				imgList: [],
				hasIsSizes: true,
				count: 2,
				size: 20,
				current: 1,
				listData: [],
				curHeight: 100,
				folderData: null,
				fatherFolderId: "0",
				dialogFolderTitle: "新增目录",
				formConfigFolder: zkForm,
				typeFolder: "add",
				dialogFolderShow: false,
				data: [],
				tableIndex: "",
				tableName: "",
				selectItem: [],
				username: "",
				// table 相关参数  begin
				dataSource: [],
				tableColumns: [
					{
						prop: "FileName",
						label: "文件名称",
					},
					{
						prop: "FileSize",
						label: "文件大小",
					},
					{
						prop: "UploadUser",
						label: "创建人",
					},
					{
						prop: "UploadTime",
						label: "创建时间",
					},
				],
				btnList: ["delete", "lookViewRow", "downloadRow"],

				// 弹窗是否显示
				dialogShow: false,
				// 弹窗标题 (新增修改不同)
				dialogTitle: "",

				// form的配置信息
				formConfig: presetFieldsForm,
				type: "add",
				propertys: [],
				propertysValue: [],
			}
		},
		methods: {
			getRandomValue() {
				this.randomValue = Math.random() * 1000000000 + "_random"
			},
			showBqSelect() {
				this.dialogBqSelectShow = true
			},
			bqSelect(e) {
				var data = JSON.parse(e)
				var ids = data.map((t) => {
					return t.Id
				})
				this.current = 1
				this.initPage(ids)
				this.dialogBqSelectShow = false
			},
			dialogBqSelectClose() {
				this.dialogBqSelectShow = false
			},
			dialogBqClose() {
				this.dialogBqShow = false
			},
			typeChange(e) {
				var item = this.propertys[e]
				console.log(e, item, "e.......")
				this.propertysValue = item.FamilyParameters
			},
			getHeight() {
				this.curHeight = window.innerHeight - 146
			},
			getData(e) {
				e.FileFolderId = this.tableIndex
				let self = this
				AjaxCommon(`/api/ResourceFile/uploadfile`, "postForm", e).then(
					(res) => {
						console.log(res, "3333")
						if (res.data.status == 200) {
							PopupCommon.notify("success", "新增成功")
							self.initPage()
							self.dialogShow = false
						} else {
							PopupCommon.notify("error", res.data.msg)
						}
					}
				)
			},
			handleNodeClick(data) {
				this.tableIndex = data.Id
				this.tableName = data.FolderName
				this.initPage()
			},
			// 懒加载获取树形结构
			loadNode(node, resolve) {
				console.log(node.level, node.data.id)
				if (node.level == 0) {
					// node其实是需要展开树节点，但是第一次的node是个无用的数据，可以认为这个node是element给我们创建的，判断的话，就是level等于0
					this.getTreeData(0, resolve)
				} else {
					this.getTreeData(node, resolve)
				}
			},
			// 获取树形结构的数据
			getTreeData(node, resolve) {
				var searchNodeID = node ? node.data.id : null
				AjaxCommon(`/api/familyfolder?key=${searchNodeID}`, "get", null).then(
					(res) => {
						if (res.data.status == 200) {
							var data = res.data.response
							data = data.map((r) => {
								return {
									id: r.Id,
									label: r.FolderName,
									children: [],
								}
							})
							console.log(data, "data.......")
							if (!node) {
								return resolve(data) // resolve是一个函数，它会接受一个数组，作为你要展开的节点的孩子节点，如果没有孩子节点，直接传一个空数组
							} else {
								if (data && data.length > 0) {
									return resolve(data) // 如果需要设置一个树节点，也可以在这里设置，比如说设置这个孩子节点是叶子节点（也就是不能展开的末节点），可以给其中的数据设置item.isLeaf = true
								} else {
									return resolve([])
								}
							}
						} else {
							PopupCommon.notify("error", res.data.msg)
						}
					}
				)
			},
			append(data) {
				console.log(data, "data.................")
				this.folderData = data
				this.fatherFolderId = data.id
				this.typeFolder = "add"
				this.dialogFolderTitle = "新增目录"
				this.dialogFolderShow = true
			},

			// remove(node, data) {
			// 	console.log(node, data, "......................data")
			// 	const parent = node.parent
			// 	const children = parent.data.children || parent.data
			// 	const index = children.findIndex((d) => d.id === data.id)
			// 	children.splice(index, 1)
			// },
			renderContent(h, { node, data }) {
				// 删除按钮，暂时隐藏。放在tree-btn  类里面
				// <span style="padding: 2px;color: red;border-radius: 2px;">
				// 					<i
				// 						class="el-icon-delete"
				// 						on-click={() => this.remove(node, data)}
				// 					></i>
				// 				</span>
				return (
					<span style="flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;">
						<span>{node.label}</span>
						<span class="tree-btn">
							<span style="color: #409EFF;padding: 2px;border-radius: 2px;margin-right: 4px;">
								<i class="el-icon-plus" on-click={() => this.append(data)}></i>
							</span>
						</span>
					</span>
				)
			},

			dialogFolderClose() {
				this.dialogFolderShow = false
			},
			formInputFolderChange(e) {
				console.log(e, "e...................")
			},
			folderSubmit(d) {
				let self = this
				var params = {
					FolderName: d.FolderName,
					LastFolderId: self.fatherFolderId,
					EnCode: d.EnCode,
					FolderType: d.FolderType,
					IsDelete: false,
				}
				var titleOpr = "新增成功"
				if (d.Id) {
					params["Id"] = d.Id
					titleOpr = "编辑成功"
				}
				AjaxCommon(`/api/familyfolder`, "postForm", params)
					.then((res) => {
						console.log(res, "res..................")
						if (res.data.status == 200) {
							PopupCommon.notify("success", titleOpr)
							if (self.fatherFolderId != "0") {
								const newChild = {
									id: res.data.response,
									label: d.FolderName,
									children: [],
								}
								if (!self.folderData.children) {
									this.$set(self.folderData, "children", [])
								}
								self.folderData.children.push(newChild)
							} else {
								self.initLeftFolder()
							}
							self.dialogFolderClose()
						} else {
							PopupCommon.notify("error", res.data.msg)
						}
					})
					.catch((err) => {
						PopupCommon.notify("error", err.message)
					})
			},
			showFolder() {
				this.fatherFolderId = "0"
				this.typeFolder = "add"
				this.dialogFolderTitle = "新增目录"
				this.dialogFolderShow = true
			},
			deleteFolder(item) {
				let self = this
				const id = item.Id
				console.log(item, "item")
				PopupCommon.confirm(`确定删除【${item.FolderName}】？`)
					.then(() => {
						AjaxCommon("/api/familyfolder/Delete?id=" + id, "delete", {
							optReason: "删除",
						}).then((res) => {
							console.log(res, "res...............")
							if (res.data.status == 200) {
								PopupCommon.notify("success", "删除成功")
								self.initLeftFolder()
								self.dialogFolderClose()
							} else {
								PopupCommon.notify("error", res.data.msg)
							}
						})
					})
					.catch(() => {
						console.log("取消")
					})
			},
			singleBtnClick() {
				if (this.yzzdSelect.length == 0) {
					PopupCommon.notify("info", "请选择预置资源")
					return
				}
				this.dialogShow = false
				console.log(this.yzzdSelect, "this.yzzdSelect......")
			},
			singleHandleSelectionChange(e) {
				this.yzzdSelect = e
			},
			deleteAll() {
				if (this.selectItem.length == 0) {
					PopupCommon.notify("info", "请先勾选数据")
					return
				}
				PopupCommon.confirm("此操作将删除选择的数据, 是否继续?")
					.then(() => {
						// self.optReason = ""
						// self.dialogVisible = true
						// // optReason
						// const data = {
						// 	index: i,
						// 	data: d[i],
						// }
						// self.formData = data
						// // this.$emit("deleteRow", data)
						console.log(this.selectItem)
					})
					.catch(() => {
						// 这里尽量写下，否则会报警告异常。
						console.log("已取消删除")
					})
			},
			handleSelectionChange(d) {
				this.selectItem = d
				console.log(d)
			},
			formInputChange(e) {
				// if (e.filedName == "idCard") {
				// 	const data = CardId.getInfoByCardId(e.value)
				// 	if (data) {
				// 		let newData = e.allData
				// 		newData["birthday"] = data.birthday
				// 		newData["sex"] = data.sex
				// 		this.$refs.form.changeFormValue(newData)
				// 	}
				// }
				console.log(e)
			},
			submit(d) {
				console.log(d)
				// let self = this
				// console.log(d)
				// if (d.id) {
				// 	AjaxCommon("/ccdc/cfg/device/device/edit", "post", d)
				// 		.then((res) => {
				// 			if (res.data.code == 200) {
				// 				PopupCommon.notify("success", "操作成功")
				// 				self.initPage()
				// 				self.dialogClose()
				// 				this.dialogClose()
				// 			} else {
				// 				PopupCommon.notify("error", res.data.message)
				// 			}
				// 		})
				// 		.catch((err) => {
				// 			PopupCommon.notify("error", err.message)
				// 		})
				// } else {
				// 	delete d.id
				// 	AjaxCommon("/ccdc/cfg/device/device/add", "post", d)
				// 		.then((res) => {
				// 			if (res.data.code == 200) {
				// 				PopupCommon.notify("success", "操作成功")
				// 				self.initPage()
				// 				self.dialogClose()
				// 			} else {
				// 				PopupCommon.notify("error", res.data.message)
				// 			}
				// 		})
				// 		.catch((err) => {
				// 			PopupCommon.notify("error", err.message)
				// 		})
				// }
			},
			dialogClose() {
				clearInterval(this.inter)
				this.dialogShow = false
			},
			searchClick() {
				this.current = 1
				this.initPage()
			},
			resetClick() {
				this.FileName = ""
			},
			addClick() {
				// // 测试
				// AjaxCommon("/api/familyresouce/downloadfile/1", "get", null)

				if (this.tableIndex == "") {
					PopupCommon.notify("info", "请先选择左侧的族目录")
					return
				}
				this.type = "add"
				this.dialogShow = true
				this.dialogTitle = "新增族目录"
			},
			// 分页点击事件
			pageChange(p) {
				this.current = p
				this.initPage()
			},
			viewRow(d) {
				this.type = "look"
				let formConfigItem = this.formConfig
				formConfigItem.map((t) => {
					Object.keys(t).map((res) => {
						if (res == "fieldName") {
							t.filedValue = d.data[t[res]]
						}
					})
				})
				this.formConfig = formConfigItem
				this.dialogShow = true
				this.dialogTitle =
					"查看" + JSON.parse(SessionCommon.getCurrentMenuInfo()).title
			},
			downloadRow(d) {
				const id = d.data.Id
				// let self = this
				AjaxCommon(
					"/api/ResourceFile/downloadfile/" + id,
					"getBlob",
					null
				).then((res) => {
					if (res.status == 200) {
						// var data = self.stringToArrayBuffer(res.data)
						var blob = new Blob([res.data])
						const href = URL.createObjectURL(blob)
						const link = document.createElement("a")
						link.download = d.data.FileName
						link.href = href
						link.click()
						try {
							document.body.removeChild(link)
						} catch (error) {
							console.log(error.message)
						}
						URL.revokeObjectURL(href) // 释放内存
					} else {
						PopupCommon.notify("error", res.data.msg)
					}
				})
			},
			stringToArrayBuffer(str) {
				console.log(str, "str....................")
				var buf = new ArrayBuffer(str.length)
				var bufView = new Uint8Array(buf)
				for (var i = 0, strLen = str.length; i < strLen; i++) {
					bufView[i] = str.charCodeAt(i)
				}
				return buf
			},
			deleteRow(d) {
				console.log(d)
				const id = d.data.Id
				let self = this
				AjaxCommon("/api/ResourceFile?id=" + id, "delete", {
					optReason: d.optReason,
				}).then((res) => {
					console.log(res, "res...............")
					if (res.data.status == 200) {
						PopupCommon.notify("success", "删除成功")
						self.initPage()
					} else {
						PopupCommon.notify("error", res.data.msg)
					}
				})
			},
			// 调用收藏
			async initSc() {
				const res = await AjaxCommon(`/api/favorite/getfavoritefamilys`, "get")
				var data = res.data.response
				if (data && data.length > 0) {
					return data
				}
				return []
			},
			// 初始化事件
			async initPage(ids) {
				let self = this
				const scList = await this.initSc()
				console.log(scList, "scList.....")
				var id = this.tableIndex
				var imageAddress = ImageAddress
				var idList = ids ? ids : []
				AjaxCommon(
					`/api/familyresouce?page=${this.current}&intPageSize=${this.size}&familyFolderId=${id}&FileName=${this.FileName}`,
					"post",
					idList
				).then((res) => {
					if (res.data.status == 200) {
						console.log(res, "datad....")
						var data = res.data.response.data
						if (data && data.length > 0) {
							self.imgList = []
							self.imgIndex = 0
							data.map((t) => {
								t.id = t.Id
								t.imgSrc = imageAddress + "/" + t.PreImage
								t.name = t.FamilyName
								t.show = false
								t.username = t.UploadUser
								t.updateTime = t.UploadTime
								t.isSc =
									scList.length > 0 &&
									scList.filter((cc) => cc.Id == t.Id).length > 0
										? 1
										: 0
								t.gs = "rfa"
								t.bb = "版本1"

								var imgList = t.MulViewImages
								var newImgList = []
								if (imgList) {
									imgList = JSON.parse(imgList)
									if (imgList && imgList.length > 0) {
										imgList.map((b) => {
											b = imageAddress + "/" + b
											newImgList.push(b)
											return b
										})
									}
									console.log(imgList, "imgList.....")
									t.MulViewImages = newImgList
								} else {
									t.MulViewImages = []
								}
								// 	id: 1,
								// imgSrc: SMJ,
								// name: "笔记本电脑1笔记本电脑1笔记本电脑1笔记本电脑1笔",
								// downloadUrl: "https://www.baidu.com",
								// // 是否收藏，1收藏了，0未收藏
								// isSc: 1,
								// gs: "rfa",
								// bb: "version1",
								// // 显示按钮
								// show: false,
								// username: "张三",
								// updateTime: "2024-12-12 11:11:11",
								return t
							})
						}
						self.listData = data
						self.count = res.data.response.dataCount
					} else {
						PopupCommon.notify("error", res.data.msg)
					}
				})
			},
			initLeftFolder(callback) {
				this.showloading = true
				let self = this
				self.data = []
				AjaxCommon(
					"/api/familyfolder/GetFullFolder?FolderType=1",
					"get",
					null
				).then((res) => {
					console.log(res, "res.............")
					if (res.data.status == 200) {
						let treeDataList = []
						treeDataList = Utility.createTreeTableDataAll(
							res.data.response,
							treeDataList,
							true
						)
						self.data = treeDataList
						setTimeout(() => {
							if (treeDataList && treeDataList.length > 0) {
								console.log("self...............................")
								var item = treeDataList[0]
								self.tableIndex = item.Id
								self.tableName = item.FolderName
								self.$nextTick(() => {
									self.$refs.tree.setCurrentKey(item.Id)
								})
								callback && callback()
							} else {
								self.tableIndex = ""
								self.tableName = ""
								self.tableList = []
							}
							self.showloading = false
						}, 1000)
					} else {
						PopupCommon.notify("error", res.data.msg)
						self.showloading = false
					}
				})
			},
			imgLeftClick() {
				if (this.imgIndex != 0) {
					this.imgIndex--
				} else {
					this.imgIndex = this.imgList.length - 1
				}
				console.log(this.imgIndex, this.imgList)
			},
			imgRightClick() {
				if (this.imgIndex != this.imgList.length - 1) {
					this.imgIndex++
				} else {
					this.imgIndex = 0
				}
			},
			handleClick(tab, event) {
				console.log(tab, event)
			},
			btnClick(index) {
				this.btnSelect = index
			},
			itemOver(item) {
				this.listData.map((t) => {
					t.show = t.id == item.id
				})
			},
			itemLevel() {
				this.listData.map((t) => {
					t.show = false
				})
			},
			itemSc(item) {
				if (item.isSc == 1) {
					item.isSc = 0
				} else {
					item.isSc = 1
					this.oprRecord(2, item)
				}
				AjaxCommon("/api/favorite/favoritefamily?id=" + item.Id, "put", null)
			},
			bindBq(item) {
				console.log(item, "item")
				this.dialogBqShow = true
			},
			deleteItem(item) {
				let self = this
				console.log(item, self)
				PopupCommon.confirm("确定要删除此文件？")
					.then(() => {
						AjaxCommon("/api/familyresouce/deleterfile/" + item.Id, "post", {
							optReason: "删除",
						}).then((res) => {
							console.log(res, "res...............")
							if (res.data.status == 200) {
								PopupCommon.notify("success", "删除成功")
								self.initLeftFolder(() => {
									self.initPage()
								})
								self.dialogShow = false
							} else {
								PopupCommon.notify("error", res.data.msg)
							}
						})
					})
					.catch(() => {
						console.log("取消")
					})
			},
			downItem(item) {
				console.log(item, "下载....")
				this.oprRecord(3, item)
				// let self = this
				AjaxCommon(
					"/api/familyresouce/downloadfile/" + item.Id,
					"getBlob",
					null
				).then((res) => {
					if (res.status == 200) {
						// var data = self.stringToArrayBuffer(res.data)
						var blob = new Blob([res.data])
						const href = URL.createObjectURL(blob)
						const link = document.createElement("a")
						link.download = item.FamilyName
						link.href = href
						link.click()
						try {
							document.body.removeChild(link)
						} catch (error) {
							console.log(error.message)
						}
						URL.revokeObjectURL(href) // 释放内存
					} else {
						PopupCommon.notify("error", res.data.msg)
					}
				})
			},
			showDetail(item) {
				// 调用查看接口  /api/FamilyFileOprateController
				this.oprRecord(1, item)
				console.log(item, "item....................")
				this.curItem = item
				try {
					this.propertys = JSON.parse(item.Propertys)
					this.propertysValue = this.propertys[0].FamilyParameters
				} catch (error) {
					this.propertys = []
					this.propertysValue = []
				}
				console.log(this.propertys, "this.propertys ....")
				this.imgIndex = 0
				this.typeValue = 0
				this.imgList = item.MulViewImages
				this.initScroll()
				this.getRandomValue()
				this.dialogShow = true
			},
			/* 查看:1收藏:2下载:3 */
			oprRecord(type, item) {
				var userId = SessionCommon.getCurUserId()
				var params = {
					UserID: userId,
					FileID: item.Id,
					OprateType: type,
					OprateTime: "",
				}
				console.log(params)
				AjaxCommon("/api/FamilyFileOprateController", "putForm", params).then(
					(res) => {
						console.log(res, params)
					}
				)
			},
			initScroll() {
				setTimeout(() => {
					this.inter = setInterval(() => {
						this.imgRightClick()
					}, 5000)
				}, 2000)
			},
			// 页码点击事件,p当前页
			handleSizeChange(e) {
				// this.$emit("handleSizeChange", e)
				this.size = e
				this.current = 1
				this.initPage()
			},
		},
		mounted() {
			this.$nextTick(() => {
				this.getHeight()
				this.initLeftFolder(() => {
					this.initPage()
				})
			})

			/*窗口自适应，关键代码*/
			window.onresize = () => {
				this.getHeight()
			}
		},
	}
</script>

<style scoped>
	.flex {
		display: flex;
	}

	.flex .flex-left {
		width: 350px;
		margin-right: 10px;
	}

	.flex .flex-right {
		flex: 1;
	}

	.flex .flex-left .navigationBar {
		height: 36px;
		line-height: 36px;
		background-color: #fff;
		margin-top: 10px;
	}

	.flex .flex-left .flex-tree {
		background-color: #fff;
		margin-top: 10px;
		height: calc(100vh - 168px);
		overflow-y: auto;
		padding: 10px;
	}

	.flex .flex-left .flex-tree .tree-item {
		height: 32px;
		line-height: 32px;
		margin: 5px 10px;
		padding: 0 10px;
		font-size: 14px;
		cursor: pointer;
	}
	.flex .flex-left .flex-tree .tree-item:hover {
		background-color: #e4f1fe;
	}
	.flex .flex-left .flex-tree .hover {
		background-color: #e4f1fe;
	}

	.flex .flex-left .navigationBar label {
		text-align: left;
		font-size: 16px;
		color: #333;
		margin-left: 10px;
	}

	.flex .flex-left .navigationBar span {
		float: right;
		margin-right: 10px;
		color: #333;
		cursor: pointer;
	}

	.singleTable {
		margin-bottom: 20px;
	}
	.singleBtn {
		position: absolute;
		bottom: 8px;
		right: 9px;
	}

	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}
	.tree-btn {
		color: red;
	}

	.main {
		margin: 10px 0;
	}
	.img-list {
		height: 480px;
		width: 100%;
		position: relative;
		text-align: center;
	}
	.img-list-left-arrow {
		font-size: 12px;
		position: absolute;
		width: 40px;
		height: 40px;
		background-color: #f5f5fa;
		top: 230px;
		left: 0;
		z-index: 1;
		cursor: pointer;
	}
	.img-list-left-arrow i,
	.img-list-right-arrow i {
		font-size: 26px;
		margin-top: 7px;
		cursor: pointer;
	}
	.img-list-right-arrow {
		font-size: 12px;
		position: absolute;
		width: 40px;
		height: 40px;
		background-color: #f5f5fa;
		top: 230px;
		right: 0;
		z-index: 1;
		cursor: pointer;
	}
	.img-list-left-img {
		font-size: 12px;
	}
	.img-list-li {
		text-align: center;
		padding-bottom: 10px;
	}
	.img-list-li ul {
		display: inline-block;
		list-style: none;
	}
	.img-list-li ul li {
		font-size: 12px;
		width: 14px;
		height: 14px;
		border-radius: 14px;
		background-color: #e1e1eb;
		float: left;
		margin-right: 20px;
	}
	.img-list-li ul li.hover {
		background-color: #8992a0 !important;
	}
	.detail-name {
		font-weight: bold;
		color: #333;
		font-size: 16px;
		margin-bottom: 8px;
	}
	.detail-update {
		color: #666;
		font-size: 16px;
	}
	.detail-wrapper {
		box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
		width: 96%;
		padding: 10px;
		height: 580px;
	}
	.detail-wrapper-type {
		height: 40px;
		line-height: 40px;
		border-bottom: 2px solid #e4e7ed;
	}
	.collapseType {
		margin-top: 10px;
		overflow-y: auto;
		height: 535px;
	}
	.collapseType-item {
		padding: 0px 10px;
		display: flex;
	}
	.collapseType-item .collapseType-item-left {
		width: 50%;
		text-align: right;
		font-size: 16px;
		line-height: 32px;
		color: #333;
		padding-right: 10px;
	}

	.collapseType-item .collapseType-item-right {
		width: 50%;
		text-align: left;
		font-size: 13px;
		line-height: 32px;
		color: #666;
	}
	.typeItem > div {
		background-color: #f5f5fa;
	}

	.list {
		margin: 10px 0;
		padding: 10px;
		background-color: #fff;
	}
	.list-title {
		display: flex;
	}
	.list-title .list-title-left {
		width: 400px;
		text-align: left;
		height: 32px;
		line-height: 32px;
	}
	.list-title .list-title-left .searchContent {
		display: inline-block;
		margin-left: 30px;
	}
	.list-title .list-title-left .el-image {
		display: block;
		float: left;
		margin-top: 4px;
		margin-right: 6px;
	}
	.list-title .list-title-right {
		flex: 1;
		text-align: right;
	}
	.gjw-list {
		height: calc(100vh - 168px);
		background: #fff;
		margin-top: 10px;
		padding: 10px;
	}
	.gjw-list .gjw-list-list {
		height: calc(100vh - 222px);
		overflow-y: auto;
		padding-top: 0px;
		margin-bottom: 10px;
	}
	.gjw-list .gjw-list-list .gjw-list-item {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-left: 10px;
		padding-top: 3px;
	}
	.gjw-list .gjw-list-list .gjw-list-item .item {
		margin-right: 10px;
		width: calc((100% - 50px) / 5);
		height: 240px;
		border-radius: 4px;
		background: #fff;
		margin-bottom: 10px;
		box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
	}
	.gjw-list .gjw-list-list .gjw-list-item .item .item-button {
		text-align: center;
		height: 32px;
		width: 100%;
	}

	.gjw-list .gjw-list-list .gjw-list-item .item .item-row {
		border-bottom: 1px solid #e0e0e0;
		height: 28px;
		line-height: 28px;
		color: #666;
		font-size: 14px;
		background-color: #f5f5fa;
	}

	.gjw-list .gjw-list-list .gjw-list-item .item .item-title {
		font-size: 14px;
		text-align: center;
		color: #333;
		line-height: 40px;
		height: 40px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		padding: 0 10px;
	}

	.gjw-list .gjw-list-list .gjw-list-item .item .item-img {
		height: 120px;
		margin: 10px;
		text-align: center;
		cursor: pointer;
	}
	.gjw-list .gjw-list-page {
		background-color: #e0e0e0;
		height: 40px;
		padding-top: 10px;
		text-align: right;
	}
	.tab-wrapper {
		display: flex; /* flex布局 */
		justify-content: flex-start; /* 左对齐 */
		flex-wrap: wrap; /* 换行 */
		padding: 20px;
		background-color: #fff;
	}

	.tab-item {
		margin-right: 20px; /* 每个元素右间距设置为20px */
		width: calc((100% - 60px) / 4);
		height: 110px;
		border-radius: 4px;
	}
	.l-img {
		width: 50%;
		float: left;
	}
	.l-border {
		border: 1px solid #fff;
		width: 66px;
		height: 54px;
		text-align: center;
		float: right;
		margin-top: 27px;
		margin-right: 20px;
		border-radius: 4px;
		padding-top: 4px;
	}
	.r-text {
		float: right;
		width: 50%;
	}
	.r-text .tab {
		font-size: 26px;
		color: #fff;
		margin-top: 25px;
	}
	.r-text .title {
		font-size: 18px;
		color: #fff;
		margin-top: 6px;
	}

	.one {
		background-color: #a6a0f5;
	}
	.two {
		background-color: #58b5ff;
	}
	.three {
		background-color: #4ec8d1;
	}
	.four {
		background-color: #fbac69;
	}
	.tab-item:nth-of-type(4n + 0) {
		margin-right: 0;
	}
	.noData {
		margin-top: 100px;
		text-align: center;
		color: #999;
	}
</style>
